<template>
	<div class="home">
		<navbar title="首页">
			<div class="store-select">
				<picker mode="selector" @change="changeStore" :value="index" :range="shopArr" range-key="storeName">
					<i class="hicon-10"></i><span>{{ shopArr[index].storeName }}</span>
				</picker>
			</div>
		</navbar>
		<div class="banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<img :src="item" class="swiper-item" />
				</swiper-item>
			</swiper>
		</div>
		<div class="main">
			<div class="shop-info">
				<h3 @click="goDetail"><img :src="logoImg" class="hicon-1" />{{ shopArr[index].storeName }}<i
						class="hicon-2"></i></h3>
				<p class="fix-p"><i class="hicon-3"></i><span @click="makePhoneCall(shopArr[index].telephone)">{{
					shopArr[index].telephone }}</span></p>
				<p @click="goMap"><i class="hicon-4"></i>{{ provinceName + cityName + shopArr[index].address }}<i
						class="hicon-5"></i></p>
			</div>
			<div class="menu-tab">
				<ul class="list-menu">
					<li>
						<p><i class="hicon hicon-6" @click="handleGo('/pagesA/preOrder/preOrderHistory')"></i></p>
						<p>预约历史</p>
					</li>
					<li @click="handleGo('/pagesA/user/courseMine')">
						<p><i class="hicon hicon-7"></i></p>
						<p>我的课程</p>
					</li>
					<li>
						<p><i class="hicon hicon-9" @click="handleGo('/pagesA/user/memberMine')"></i></p>
						<p>个人资料</p>
					</li>
				</ul>
			</div>
			<div class="coach-list">
				<h2><span class="fr" @click="handleCoach">全部教练<i class="hicon-2"></i></span>教练风采</h2>
				<div class="fix-padding">
					<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scrollLeft">
						<ul class="list-coach">
							<li v-for="(item, index) in coachArr" :key="index" @click="goDetailCoach(item)">
								<div class="coach-img"><img mode="aspectFill"
										:src="item.portraitPictureFileUrl ? item.portraitPictureFileUrl : 'https://newmefit.cn/resource/gym/base/base1.jpg'" />
								</div>
								<p>{{ item.userName }}</p>
							</li>
						</ul>
					</scroll-view>
				</div>
			</div>
			<div class="course-list">
				<h2>推荐课程</h2>
				<div class="fix-padding1">
					<ul class="list-course">
						<li @click="goDetailCourse(item)" v-for="(item, index) in courseList" :key="index">
							<div class="cover"><img mode="aspectFill"
									:src="item.frontImageFileUrl ? item.frontImageFileUrl : 'https://newmefit.cn/resource/gym/base/base2.jpg'">
							</div>
							<div class="course-info">
								<h4>{{ item.courseName }}</h4>
								<p>{{ setCourseMode(item.courseMode) }}</p>
								<p>{{ item.courseTimes }}分钟/节</p>
								<p class="right">
									<span v-for="(o, i) in item.coachList" :key="i" v-if="i < 3">{{ o.userName
									}}</span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import navbar from '@/components/navbar/navbar'
import { storeGet, getPublicUrl, listPublicUrl, listStoreEnabled, courseGetList, storeDetailGet } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'
export default {
	components: {
		navbar
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			bannerList: [
				'../../static/h3.jpg'
			],
			shopArr: [
				{ storeName: '', id: '' }
			],
			isStart: true,
			index: 0,
			storeId: '',
			logoImg: '../../static/logo.png',
			coachArr: [],
			courseList: [],
			provinceName: '',
			cityName: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad() {
		this.getShops()
	},
	onShow() {
		this.getShops()
	},
	methods: {
		makePhoneCall(phoneNum) {
			uni.makePhoneCall({
				phoneNumber: phoneNum
			})
		},
		setCourseMode(val) {
			if (val === 1) {
				return '1对1'
			} else if (val === 2) {
				return '1对2'
			} else {
				return ''
			}
		},
		goDetailCoach(item) {
			var url = '/pagesA/home/coachDetail?id=' + item.userId + '&storeName=' + this.shopArr[this.index].storeName
			// setStore('teachCourseList', JSON.stringify(item.teachCourseList?item.teachCourseList:[]))
			this.goUrl(url)
		},
		goDetailCourse(item) {
			var url = '/pagesA/home/courseDetail?id=' + item.id + '&storeName=' + this.shopArr[this.index].storeName
			this.goUrl(url)
		},
		handleGo(url) {
			this.goUrl(url)
		},
		// 获取店铺
		getShops() {
			storeGet('').then(res => {
				// console.log(res)
				if (res.code == '200') {
					var data = res.data
					this.shopArr = data

					this.index = 0
					this.storeId = this.shopArr[0].id

					if (getStore('storeId')) {

						this.shopArr.forEach((item, index) => {
							// console.log(item.id, getStore('storeId'))
							if (item.id == getStore('storeId')) {
								this.index = index
								this.storeId = item.id
							}
						})
					} else {

						this.shopArr.forEach((item, index) => {
							if (item.flagship === 1) {

								this.index = index
								this.storeId = item.id
							}
						})
					}
					setStore('storeId', this.storeId)
					this.getStoreDetail(this.storeId)
					this.getListStoreEnabled(this.storeId)
					this.getCourseList(this.storeId)
				}
			})
		},
		getStoreDetail(storeId) {
			var params = {
				id: storeId
			}
			storeDetailGet(params).then(res => {
				// console.log(res)
				if (res.code == 200) {
					var data = res.data
					// 获取单个图片
					getPublicUrl({ fileId: data.logoFileId }).then(response => {
						if (response.data) {
							// this.logoImg = response.data
						}
					})
					// 获取图片列表
					listPublicUrl(data.imageFileIds).then(response => {
						if (response.data) {
							this.bannerList = []
							for (var key in response.data) {
								this.bannerList.push(response.data[key])
							}
						}
					})
					this.provinceName = data.provinceName
					this.cityName = data.cityName
					// console.log(this.provinceName, this.cityName)
				}
			})
		},
		changeStore(e) {
			this.index = e.detail.value
			this.storeId = this.shopArr[this.index].id
			// console.log(this.storeId)
			setStore('storeId', this.storeId)
			this.getStoreDetail(this.storeId)
			this.getListStoreEnabled(this.storeId)
			this.getCourseList(this.storeId)
		},
		goDetail() {
			var url = '/pagesA/home/storeDetail?id=' + this.shopArr[this.index].id
			this.goUrl(url)
		},
		goMap() {
			if (this.shopArr[this.index].longitude && this.shopArr[this.index].latitude) {
				uni.openLocation({
					latitude: parseFloat(this.shopArr[this.index].latitude),
					longitude: parseFloat(this.shopArr[this.index].longitude),
					name: this.shopArr[this.index].storeName,
					address: this.provinceName + this.cityName + this.shopArr[this.index].address,
					success: function () {
						console.log('success')
					},
					fail: function (res) {
						console.log('调用失败：', res)
					}
				})
			}
		},
		handleCoach() {
			var url = '/pagesA/home/coachList?storeId=' + this.storeId + '&storeName=' + this.shopArr[this.index].storeName
			this.goUrl(url)
		},
		// 获取推荐教练列表
		getListStoreEnabled(storeId) {
			var params = {
				storeId: storeId,
				recommend: 1
			}
			listStoreEnabled(params).then(res => {
				if (res.code == '200') {
					var data = res.data
					this.coachArr = data
				}
			})
		},
		// 获取推荐课程列表
		getCourseList(storeId) {
			var params = {
				current: 1,
				size: 1000,
				storeId: storeId,
				courseState: 1,
				freeCourse: false
			}
			courseGetList(params).then(res => {
				if (res.code == '200') {
					var data = res.data
					this.courseList = data
				}
			})
		}
	}
}
</script>

<style lang="scss">
.home {
	background: #F77942;

	.store-select {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		z-index: 10;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-indent: 50rpx;
		background: transparent;
		border-radius: 29rpx;
		border: 1px solid #ddd;
		color: #333;
		font-size: 22rpx;
		opacity: 1;

		span {
			width: 100rpx;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-indent: 0;
		}
	}

	.fr {
		float: right;
	}

	.right {
		text-align: right;
	}

	.hicon-1 {
		width: 116rpx;
		height: 116rpx;
		// display: inline-block;
		// background: url('../../static/logo.png') no-repeat 0 0;
		// background-size: cover;
		border-radius: 50%;
		position: absolute;
		left: 28rpx;
		top: -44rpx;
	}

	.hicon-2 {
		width: 11rpx;
		height: 20rpx;
		display: inline-block;
		position: absolute;
		right: 32rpx;
		top: 37rpx;
		background: url('../../static/right.png') no-repeat 0 0;
		background-size: contain;
	}

	.hicon-3 {
		width: 22rpx;
		height: 24rpx;
		display: inline-block;
		background: url('../../static/phone.png') no-repeat 0 0;
		background-size: cover;
		vertical-align: middle;
		margin-right: 8rpx;
	}

	.hicon-4 {
		width: 22rpx;
		height: 24rpx;
		display: inline-block;
		background: url('../../static/position.png') no-repeat 0 0;
		background-size: cover;
		vertical-align: middle;
		margin-right: 8rpx;
		margin-top: -8rpx;
	}

	.hicon-5 {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background: url('../../static/map.png') no-repeat 0 0;
		background-size: cover;
		position: absolute;
		right: 32rpx;
		bottom: 42rpx;
		margin-top: -8rpx;
	}

	.hicon {
		width: 84rpx;
		height: 84rpx;
		display: inline-block;
		position: relative;
		margin-bottom: 8rpx;
		margin-top: 32rpx;
	}

	.hicon-6 {
		background: url('../../static/icon-1.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-7 {
		background: url('../../static/icon-2.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-8 {
		background: url('../../static/icon-3.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-9 {
		background: url('../../static/icon-4.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-10 {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		position: absolute;
		left: 16rpx;
		top: 12rpx;
		background: url('../../static/tab.png') no-repeat 0 0;
		background-size: cover;
	}

	.banner {
		width: 100%;
		height: 500rpx;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 500rpx;
			text-align: center;
		}
	}

	.main {
		padding: 24rpx;

		.shop-info {
			width: 100%;
			height: 230rpx;
			background: url('https://newmefit.cn/resource/gym/base/base7.png') no-repeat 0 0;
			background-size: cover;
			border-radius: 25rpx;
			padding: 20rpx 32rpx 34rpx 28rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 24rpx;

			h3 {
				width: 631rpx;
				font-size: 32rpx;
				color: #1E1E1E;
				line-height: 56rpx;
				text-indent: 130rpx;
				margin-bottom: 22rpx;
			}

			p {
				width: 513rpx;
				font-size: 24rpx;
				color: #575757;
				line-height: 30rpx;
				margin-bottom: 16rpx;
			}

			.fix-p {
				margin-bottom: 22rpx;
			}
		}

		.menu-tab {
			width: 100%;
			height: 188rpx;
			background: url('https://newmefit.cn/resource/gym/base/base8.png') no-repeat 0 0;
			background-size: cover;
			border-radius: 25rpx;
			margin-bottom: 24rpx;

			.list-menu {
				display: flex;

				li {
					width: 25%;
					text-align: center;

					p {
						font-size: 24rpx;
						color: #1E1E1E;
					}
				}
			}
		}

		.coach-list {
			width: 100%;
			height: 382rpx;
			background: url('https://newmefit.cn/resource/gym/base/base9.png') no-repeat 0 0;
			background-size: contain;
			border-radius: 25rpx;
			margin-bottom: 24rpx;
			padding: 26rpx 0 32rpx 0rpx;
			box-sizing: border-box;
			position: relative;

			h2 {
				overflow: hidden;
				text-indent: 28rpx;
				font-size: 30rpx;

				span {
					margin-right: 28rpx;
					padding-right: 38rpx;
					font-weight: normal;
					font-size: 24rpx;
				}
			}

			.fix-padding {
				padding: 30rpx 0 22rpx 28rpx;
				background: #FFFFFF;
				border-radius: 0 0 25rpx 25rpx;
			}

			.scroll-view {
				.list-coach {
					display: flex;

					li {
						width: 210rpx;
						height: 258rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
						border-radius: 15rpx;
						padding: 10rpx;
						box-sizing: border-box;
						margin-right: 28rpx;

						.coach-img {
							width: 190rpx;
							height: 190rpx;
							margin-bottom: 15rpx;
							text-align: center;
							line-height: 190rpx;
						}

						img {
							max-width: 100%;
							max-height: 100%;
							vertical-align: middle;
							border-radius: 15rpx;
						}

						p {
							font-weight: 500;
							font-size: 24rpx;
							color: #1E1E1E;
							text-align: center;
						}
					}
				}
			}
		}

		.course-list {
			width: 100%;
			background: url('https://newmefit.cn/resource/gym/base/base10.png') no-repeat 0 0;
			background-size: contain;
			border-radius: 25rpx;
			padding: 26rpx 0 0 0;
			box-sizing: border-box;
			position: relative;

			h2 {
				overflow: hidden;
				// margin-bottom: 32rpx;
				text-indent: 28rpx;
				font-size: 30rpx;

			}

			.fix-padding1 {
				padding: 22rpx 28rpx 26rpx 28rpx;
				background: #fff;
				border-radius: 0 0 25rpx 25rpx;
			}

			.list-course {
				width: 100%;

				li {
					width: 100%;
					display: flex;
					margin-bottom: 52rpx;

					.cover {
						width: 210rpx;
						height: 166rpx;
						margin-right: 20rpx;
						text-align: center;
						line-height: 160rpx;
						background: #f5f5f5;
						border-radius: 15rpx;

						img {
							max-width: 100%;
							max-height: 100%;
							vertical-align: middle;
							border-radius: 15rpx;
						}
					}

					.course-info {
						h4 {
							font-size: 29rpx;
							color: #1E1E1E;
							margin-bottom: 14rpx;
							margin-top: -6rpx;
							width: 411rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: normal;
						}

						p {
							font-size: 25rpx;
							color: #838383;
							margin-bottom: 12rpx;

							span {
								min-width: 86rpx;
								height: 36rpx;
								padding: 0 10rpx;
								background: #FFF4EF;
								border-radius: 10rpx;
								font-size: 22rpx;
								color: #FF5A20;
								display: inline-block;
								text-align: center;
								margin-right: 10rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}

	}
}
</style>
